{% extends 'adminOut.html' %}
{% block main %}
<ol class="breadcrumb">
    <li><a href="/admin">管理首页</a></li>
    <li><span>内容修改</span></li>
</ol>
<h3>内容修改</h3>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="/public/css/monokai-sublime.css">
<script src="/public/js/highlight.pack.js"></script>
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="/public/js/vue-quill-editor.js"></script>
<div id="app">
    <div class="form-group">
        <label for="category">分类:</label>
        <select name="category" id="category" class="form-control">
            {% for c in categories %}
            {% if hqcontent.category._id.toString()==c._id %}
            <option value="{{c.id}}" selected>{{c.name}}</option>
            {% else %}
            <option value="{{c.id}}">{{c.name}}</option>
            {% endif %}
            {%endfor%}
        </select>
    </div>
    <div class="form-group">
        <label for="title">标题:</label>
        <input type="text" value="{{hqcontent.title}}" class="form-control" id="title" placeholder="请输入内容标题" name="title">
    </div>
    <div class="form-group">
        <label for="description">简介:</label>
        <textarea class="form-control" id="description" placeholder="请输入内容简介" name="description"
            rows="5">{{hqcontent.desc}}</textarea>
    </div>
    <div class="form-group">
        <label for="content">内容:</label>
        <!-- <textarea class="form-control" id="content" placeholder="请输入内容" name="content" rows="10">{{hqcontent.content}}</textarea> -->
        <div class="box">
            <quill-editor class="editor" id="content" name="content" v-model="content" ref="myQuillEditor"
                :options="editorOption" @change="onEditorChange($event)">
            </quill-editor>
        </div>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</div>
<script type="text/javascript">
    Vue.use(window.VueQuillEditor)
    // 工具栏配置
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': 1 }, { 'header': 2 }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'size': ['small', 'medium', 'large', 'huge', 'false'] }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'font': [] }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
        ['clean'],
        ['link', 'image', 'video']
    ];
    new Vue({
        el: '#app',
        data: function () {
            return {
                category: '',
                title: '',
                description: '',
                content: '',
                editorOption: {
                    placeholder: "",
                    theme: "snow",
                    modules: {
                        toolbar: {
                            container: toolbarOptions,
                            // container: "#toolbar",
                        },
                        syntax: {
                            highlight: text => {
                                console.log(text)
                                return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
                            }
                        }
                    }
                },
            }
        },
        methods: {
            onEditorChange() {
                //内容改变事件
                // this.$emit("input", this.content);
                // console.log(this.content)
            },
            subForm() {
                this.content = this.content.replace(/<pre/gi, '<pre class="hljs" ')
                // return false;
                let obj = {
                    category: this.category,
                    title: this.title,
                    description: this.description,
                    content: this.content
                }
                $.ajax({
                    url: '/admin/content/edit',
                    type: 'post',
                    data: obj,
                    success: function (msg) {
                        //列表数据页面渲染
                        document.write(msg)
                        // $("#app").html(msg);
                    }
                })
            }
        },
        mounted () {
            console.log(hqcontent)
        }
    })

</script>
{%endblock%}